<template>
  <Condition :conditionList="conditionList" v-model="condition"></Condition>
  <TaskContainer>
    <el-table :data="list" style="width: 100%" border ref="tb">
      <el-table-column type="selection" width="55"/>
      <!-- <el-table-column prop="id" label="序号" width="60"/> -->
      <el-table-column prop="leave" label="难易程度" width="100"/>
      <!-- <el-table-column prop="langName" label="语言" width="120"/>
      <el-table-column prop="module" label="模块名" width="160"/> -->
      <el-table-column prop="title" label="任务名" class-name="hidden-column"/>
    </el-table>

    <!-- 添加分页插件 -->
    <div style="margin: 20px 0;">
      <el-pagination background layout="prev, pager, next"
                     hide-on-single-page
                     :page-size="pagination.rows"
                     :pager-count="11"
                     v-model:current-page="pagination.page"
                     :total="1000"/>
    </div>
  </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"

export default {
  components: {
    HeaderNav,
    TaskContainer,
    Condition,
  },
  data() {
    return {
      pagination: {
        page: 1,
        rows: 10,
      },
      list: [
        {
          id: 1,
          langName: 'Java',
          module: '基础',
          leave: '简单题',
          title: "【接口】创建一个接口 Shape，它包含方法 double calculateArea() 和 double calculatePerimeter()。然后创建一个类 ShapeUtils，它包含一个静态方法 void printShapeDetails(Shape shape)，该方法接受一个 Shape 对象，并打印出该形状的面积和周长。"
        },
        {
          id: 2,
          langName: 'Java',
          module: '基础',
          leave: '简单题',
          title: "【装饰器】编写一个装饰器 pow(n=1) 可以将 返回 int 类型的函数的结果 改变为 n次幂。 例如 返回 2，则经过装饰器 pow(n=4)后， 函数返回结果为 16"
        },
        {
          id: 1,
          langName: 'Java',
          module: '基础',
          leave: '简单题',
          title: "【接口】创建一个接口 Shape，它包含方法 double calculateArea() 和 double calculatePerimeter()。然后创建一个类 ShapeUtils，它包含一个静态方法 void printShapeDetails(Shape shape)，该方法接受一个 Shape 对象，并打印出该形状的面积和周长。"
        },
        {
          id: 2,
          langName: 'Java',
          module: '基础',
          leave: '简单题',
          title: "【装饰器】编写一个装饰器 pow(n=1) 可以将 返回 int 类型的函数的结果 改变为 n次幂。 例如 返回 2，则经过装饰器 pow(n=4)后， 函数返回结果为 16"
        },
        {
          id: 1,
          langName: 'Java',
          module: '基础',
          leave: '简单题',
          title: "【接口】创建一个接口 Shape，它包含方法 double calculateArea() 和 double calculatePerimeter()。然后创建一个类 ShapeUtils，它包含一个静态方法 void printShapeDetails(Shape shape)，该方法接受一个 Shape 对象，并打印出该形状的面积和周长。"
        },
        {
          id: 2,
          langName: 'Java',
          module: '基础',
          leave: '简单题',
          title: "【装饰器】编写一个装饰器 pow(n=1) 可以将 返回 int 类型的函数的结果 改变为 n次幂。 例如 返回 2，则经过装饰器 pow(n=4)后， 函数返回结果为 16"
        },
        {
          id: 1,
          langName: 'Java',
          module: '基础',
          leave: '简单题',
          title: "【接口】创建一个接口 Shape，它包含方法 double calculateArea() 和 double calculatePerimeter()。然后创建一个类 ShapeUtils，它包含一个静态方法 void printShapeDetails(Shape shape)，该方法接受一个 Shape 对象，并打印出该形状的面积和周长。"
        },
        {
          id: 2,
          langName: 'Java',
          module: '基础',
          leave: '简单题',
          title: "【装饰器】编写一个装饰器 pow(n=1) 可以将 返回 int 类型的函数的结果 改变为 n次幂。 例如 返回 2，则经过装饰器 pow(n=4)后， 函数返回结果为 16"
        },
        {
          id: 1,
          langName: 'Java',
          module: '基础',
          leave: '简单题',
          title: "【接口】创建一个接口 Shape，它包含方法 double calculateArea() 和 double calculatePerimeter()。然后创建一个类 ShapeUtils，它包含一个静态方法 void printShapeDetails(Shape shape)，该方法接受一个 Shape 对象，并打印出该形状的面积和周长。"
        },
        {
          id: 2,
          langName: 'Java',
          module: '基础',
          leave: '简单题',
          title: "【装饰器】编写一个装饰器 pow(n=1) 可以将 返回 int 类型的函数的结果 改变为 n次幂。 例如 返回 2，则经过装饰器 pow(n=4)后， 函数返回结果为 16"
        },
      ],
      condition: {}, // 查询条件
      conditionList: [
        {
          name: "编程语言",
          value: 'langName',  // 查询条件对应的键
          list: [
            {
              id: 1 ,
              name: "Java",
              child: {
                name: "任务模块",
                value: 'module',
                list: [
                  {id: 1, name: "基础"},
                  {id: 2, name: "流程控制"},
                  {id: 3, name: "列表/数组"},
                  {id: 4, name: "字典"},
                  {id: 5, name: "集合"},
                ]
              }
            },
            {
              id: 2 ,
              name: "Python",
              child: {
                name: "任务模块",
                value: 'module',
                list: [
                  {id: 6, name: "HTML"},
                  {id: 7, name: "CSS"},
                  {id: 8, name: "Javascript"},
                  {id: 9, name: "jQuery"},
                  {id: 10, name: "Vue"},
                ]
              }
            },
          ],
           multi: true, // 支持多选
        },
        {
          name: "难易程度",
          value: 'leave',  // 查询条件对应的键
          list: [
            {id: "简单题", name: "简单题"},
            {id: "中等题", name: "中等题"},
            {id: "难题", name: "难题"},
            {id: "选做题", name: "选做题"},
          ],
          multi: true, // 支持多选
        }
      ]
    }
  },
  
}
</script>

<style scoped>

:deep(.nav-condition-ul a) {
  color: #333;
}

.table-modules {
  padding: 10px 20px;
}

.table-modules span {
  padding: 2px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.toolbar {
  position: relative;
  right: 10px;
  z-index: 200;
  text-align: right;
  margin: 20px;
  flex: 1 1 auto;
}

:deep(.hidden-column .cell) {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

</style>
